<template>
  <el-pagination :current-page.sync="pagination.pageNum" :page-size.sync="pagination.pageSize" :total="pagination.total"
    :page-sizes="paginationConfig.pageSizes" :layout="paginationConfig.layout" :hide-on-single-page="isFunction(paginationConfig.hideOnSinglePage)
        ? paginationConfig.hideOnSinglePage(pagination.total)
        : false
      " v-bind="$attrs" v-on="$listeners" />
</template>

<script>
const paginationSetting = {
  pageSizes: [10, 20, 30, 50, 100],
  layout: "total, sizes, prev, pager, next, jumper",
  hideOnSinglePage: total => total === 0
};

export default {
  name: "BasePagination",
  props: {
    pagination: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    paginationConfig() {
      return {
        ...paginationSetting,
        ...this.pagination
      };
    }
  },
  methods: {
    isFunction(fn) {
      return typeof fn === "function";
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination__editor.el-input .el-input__inner {
  line-height: inherit;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
